<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>交易信息</span>
      </div>
      <el-table :data="tableData" max-height="300" border style="width: 100%">
        <el-table-column prop="xid" label="区块链交易ID" width="200"></el-table-column>
        <el-table-column prop="show_time" label="交易时间" width="200"></el-table-column>
        <el-table-column prop="metadata" label="交易元数据"></el-table-column>
      </el-table>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import Page from "@/components/page.vue";
@Component({
  components: {
    Page
  }
})
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = {
    height: 0,
    hash: "",
    txn_qty: 0,
    timestamp: null
  };
  protected tableData: any = [];

  @Watch("data", { deep: true })
  protected init() {
    const { txns } = this.data;
    txns.forEach((el: any) => {
      const time = "show_time";
      el[time] = Vue.prototype.$fmtDate(el.timestamp);
    });
    this.tableData = txns;
  }
}
</script>

<style lang="scss" scoped>
</style>


